<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.js">
    </script>
</head>
<body>
    <div id="root">
        <div>
            <input type="text" v-model="cityName" />

            <div>
                <p>数组元素:{{arrayNumber}}</p>
                <p>:{{maxNumber}}</p>
                <p>:{{min}}</p>
                <!-- <p>:{{findMin1()}}</p>  -->
                <button @click="findMin">最小值</button>
            </div>
            <table border="1">
                <!-- 表头 -->
                <thead>
                  <tr>
                    <th>商品名称</th>
                    <th>商品类型</th>
                    <th>价格</th>
                  </tr>
                </thead>
                <!-- 表格主体 -->
                <tbody>
                  <tr v-for="(i,index) in products" :key="i.id">
                    <td >{{i.name}} </td>
                    <td >{{i.type}} </td>
                    <td >{{i.price}} </td>  
                  </tr>
                </tbody>
              </table>
              <p>总价格：{{totalCount}}</p>
              <!-- <div v-for="(value,name) in user">
                属性名是:{{name}}--属性值为： {{value}}
              </div> -->
        </div>
    </div>
    
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                cityName: "徐以民去 哈尔滨省",
                arrayNumber: [3000,-2000,1308,278,225,556,1110],
                min: 0,
                products:[
                    {id:1,name:'可乐',type:'饮品',price:"3"},
                    {id:2,name:'好玩的',type:'品',price:"3"},
                    {id:3,name:'好喝',type:'品',price:"3"},
                    {id:4,name:'好吃的',type:'品',price:"3"},
                ]
            },
            watch:{
                cityName(newValue,oldValue){
                    this.cityName = newValue;
                    console.log(newValue,"    Old:"+oldValue);
                    
                },
                immediate:true
            },
            computed:{
                    totalCount(){
                        let total = this.products.reduce((sum, item) => sum +(+item.price), 0);
                        return total;
                    },
                    maxNumber: function(){
                        console.log(this);
                        return Math.max(...this.arrayNumber);
                    },   
                    data(){
                        return {
                            arrayNumber: [3000,-2000,1308,278,225,556,1110],
                            min : 0
                        }
                    }
                },
                methods:{
                    findMin(){
                        this.min = Math.min(...this.arrayNumber);
                    },
                    findMin1(){
                        return Math.min(...this.arrayNumber);
                    }
                }
        });
        vm.$mount('#root');
        
    </script>
    
</body>
</html>